<script setup lang="ts">
import HomeContent from '@/components/HomeContent/index.vue'
import { insertRoomInfoAPI } from '@/services/room/room'
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { insertRoomInfoParams } from '@/services/room/type'
import { useUserStore } from '@/stores'
import { useRouter } from 'vue-router'
const $router = useRouter()
const userStore = useUserStore()
const _roomId = ref<string>(userStore.userInfo?.userInfo?.roomId)

// 表单元素
const formRef = ref<FormInstance>()

// 表单数据类型
interface fromType {
  // 房间ID
  roomId: string
  // 房间标题
  title: string
  // 房间人数
  capacity: number
  // 密码
  password?: string
}

// 表单收集数据
const form = reactive<fromType>({
  roomId: _roomId.value,
  title: '',
  capacity: 0,
  password: ''
})

// 表单校验规则
const rules = reactive<FormRules<fromType>>({
  roomId: [{ required: true, message: '请输入会议号', trigger: 'blur' }],
  title: [{ required: true, message: '请输入会议标题', trigger: 'blur' }],
  capacity: [{ required: false, message: '请输入会议标题', trigger: 'blur' }],
  password: [
    {
      pattern: /^.{4}$/,
      message: '请输入四位字符的密码',
      trigger: 'blur'
    }
  ]
})

// 表单提交事件
const createMeeting = async () => {
  await formRef.value?.validate()
  // 添加房间记录
  const insertRoomInfoParams = ref<insertRoomInfoParams>({
    roomId: _roomId.value,
    account: userStore.userInfo.userInfo.username,
    title: form.title,
    capacity: form.capacity,
    password: form.password
  })
  await insertRoomInfoAPI(insertRoomInfoParams.value)

  $router.push({
    path: `/meeting/${form.roomId}`,
    query: {
      flag: '0'
    }
  })
}
</script>
<template>
  <HomeContent>
    <template #title> 创建会议 </template>
    <template #content>
      <el-form
        :model="form"
        :rules="rules"
        ref="formRef"
        class="form"
        label-width="120px"
      >
        <el-form-item prop="roomId" label="房间ID">
          <el-input v-model="form.roomId" class="meetingNumberInp" disabled />
        </el-form-item>
        <el-form-item prop="title" label="房间标题">
          <el-input
            v-model="form.title"
            class="meetingNumberInp"
            placeholder="请输入标题"
          />
        </el-form-item>
        <el-form-item prop="capacity" label="房间人数">
          <el-input v-model="form.capacity" class="meetingNumberInp" />
          <el-tooltip
            class="box-item"
            effect="dark"
            content="此选项为选填，默认为该账号限制最大人数"
            placement="right"
          >
            <el-icon><InfoFilled /></el-icon>
          </el-tooltip>
        </el-form-item>
        <el-form-item prop="password" label="房间密码">
          <el-input v-model="form.password" class="meetingNumberInp" />
          <el-tooltip
            class="box-item"
            effect="dark"
            content="此选项为选填, 密码限制为四位数字"
            placement="right"
          >
            <el-icon><InfoFilled /></el-icon>
          </el-tooltip>
        </el-form-item>
        <el-form-item>
          <el-button @click="createMeeting" class="formBtn">创建</el-button>
        </el-form-item>
      </el-form>
    </template>
  </HomeContent>
</template>

<style scoped lang="less">
.box-item {
  padding-left: 10px;
}
.form {
  margin: 20px 0;
}
.meetingNumberInp {
  width: 300px;
  height: 40px;
}
.formBtn {
  width: 100px;
  background-color: #006eff;
  color: #fff;
}
:deep(.el-form-item__content) {
  justify-content: center;
  position: relative;
}
:deep(.el-tooltip__trigger) {
  position: absolute;
  right: -20px;
}
</style>
